<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="easyui/datagrid-detailview.js"></script>
    <script>
        $(function(){
            $('#dg').datagrid({
                url:'user/findByPage',
                // data:[
                //     { id:1001,name:'张三',phone:13888888888,address:'南京',status:1},
                //     { id:1002,name:'李四',phone:1383838438,address:'北京',status:0},
                //     { id:1003,name:'陈烽',phone:13888888888,address:'上海',status:1},
                //     { id:1004,name:'王大伟',phone:1383838438,address:'南京',status:0},
                //     { id:1005,name:'袁兴阳',phone:13888888888,address:'无锡',status:0},
                //     { id:1006,name:'唐件虎',phone:13888888888,address:'无锡',status:0},
                //     { id:1006,name:'唐件虎',phone:13888888888,address:'无锡',status:0},
                //     { id:1006,name:'唐件虎',phone:13888888888,address:'无锡',status:0},
                //     { id:1006,name:'唐件虎',phone:13888888888,address:'无锡',status:0},
                //     { id:1006,name:'唐件虎',phone:13888888888,address:'无锡',status:0},
                // ],
                data:{
                    total:22,
                    rows:[
                        { id:1001,name:'张三',phone:13888888888,address:'南京',status:1},
                        { id:1002,name:'李四',phone:1383838438,address:'北京',status:0},
                        { id:1003,name:'陈烽',phone:13888888888,address:'上海',status:1},
                        { id:1004,name:'王大伟',phone:1383838438,address:'南京',status:0},
                        { id:1005,name:'袁兴阳',phone:13888888888,address:'无锡',status:0},
                    ]
                },
                columns:[[
                    {title:'姓名',field:'name',width:'20%',align:'center'},
                    {title:'电话',field:'phone',width:'20%',align:'center'},
                    {title:'地址',field:'address',width:'20%',align:'center'},
                    {title:'状态',field:'status',width:'20%',align:'center',formatter:function(value,row,index){
                        // console.log(value,row,index);
                        return value==1?'启用':'禁用';
                    }},
                    {title:'操作',field:'id',width:'20%',align:'center',formatter:function(value,row,index){
                        var str = row.status==1?'禁用':'启用'
                        return '<button class="easyui-linkbutton">'+str+'</button>';
                    }},
                ]],
                title:'用户列表',
                iconCls:'icon-save',
                // width:800,
                // height:400,
                width:'100%',
                singleSelect:true,
                rownumbers:true,
                pagination:true,
                pageSize:5,
                pageList:[5,10,30],
                toolbar:'#tb',

                view: detailview,
                detailFormatter: function(rowIndex, rowData){
                    return '<table><tr>' +
                            '<td rowspan=2 style="border:0">'+rowData.name+'</td>' +
                            '<td style="border:0">' +
                            '<p>Attribute: ' + rowData.phone + '</p>' +
                            '<p>Status: ' + rowData.address + '</p>' +
                            '</td>' +
                            '</tr></table>';
                }

            });
       
            // 初始化添加对话框
            $('#dd_add').dialog({
                title: '添加用户',
                width: 400,
                height: 250,
                closed: true,   // 默认是否关闭
                modal: true, // 是否显示为模态框
                iconCls:'icon-add',
                buttons:[
                    {
                        text:'确定',
                        iconCls:'icon-ok',
                        handler:function(){
                            // 发送ajax请求
                            // $.ajax(function(){
                               
                            // });
                            // 怎么渠道
                    
                            console.log($("#username").textbox('getvalue'));
                            $('#dd_add').dialog('close');
                        }
                    },
                    {
                        text:'取消',
                        iconCls:'icon-no',
                        handler:function(){
                            $('#dd_add').dialog('close');
                        }
                    },
                ]
            });

            // 初始化修改对话框
            $('#dd_modify').dialog({
                title: '修改用户',
                width: 400,
                height: 250,
                closed: true,   // 默认是否关闭
                modal: true, // 是否显示为模态框
                iconCls:'icon-add',
                buttons:[
                    {
                        text:'确定',
                        iconCls:'icon-ok',
                        handler:function(){
                            // 发送ajax请求


                            $('#dd').dialog('close');
                        }
                    },
                    {
                        text:'取消',
                        iconCls:'icon-no',
                        handler:function(){
                            $('#dd').dialog('close');
                        }
                    },
                ]

            });
                  // 点击修改后
            $('#btn_modify').click(function(){
                var row = $('#dg').datagrid('getSelected');
                if(row==null){
                    $.messager.alert('提示','请先选择要修改的用户！','info');
                }
                // console.log(row);
                // 发送ajax请求，根据id查询用户信息 row.id
                $('#modify_name').textbox('setValue',row.name);

                $('#dd_modify').dialog('open');
            });
        });
    </script>
</head>
<body>
    <!-- 工具栏 start -->
    <div id="tb">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="$('#dd_add').dialog('open')">新增</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" id="btn_modify">修改</a>
        &nbsp;&nbsp; 
        <input class="easyui-textbox" data-options="label:'姓名：',labelWidth:50" style="width:190px">
        <input class="easyui-textbox" data-options="label:'电话：',labelWidth:50" style="width:190px">
        <select class="easyui-combobox" data-options="panelHeight:'auto'">
            <option value="">----请选择----</option>
            <option value="">启用</option>
            <option value="">禁用</option>
        </select>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>

    </div>
    <!-- 工具栏 end -->

    <!-- 添加对话框 start -->
    <div id="dd_add" style="padding-top: 20px;text-align: center;">
            <div style="margin-bottom:20px">
                <input id="username" class="easyui-textbox" data-options="label:'用户名：',required:true" style="width:70%">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" data-options="label:'电话：',required:true" style="width:70%">
            </div>
            <div style="margin-bottom:20px">
                    <input class="easyui-textbox" data-options="label:'地址：',required:true" style="width:70%">
            </div>
    </div>
    <!-- 添加对话框 end -->

    <!-- 修改对话框 start -->
    <div id="dd_modify" style="padding-top: 20px;text-align: center;">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" data-options="label:'用户名：',required:true" style="width:70%" id="modify_name">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" data-options="label:'电话：',required:true" style="width:70%">
            </div>
            <div style="margin-bottom:20px">
                    <input class="easyui-textbox" data-options="label:'地址：',required:true" style="width:70%">
                </div>
        </div>
    <!-- 修改对话框 end -->

    <table id="dg"></table>
</body>
</html>